<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

		<style type="text/css">
			.btn {
				width: 100%;
			}
		</style>
	</head>
	<body>

		<div class="jumbotron jumbotron-fluid">

			<div class="container text-center">
				<h1 class="display-4">学员信息表</h1>
				<p class="lead">1803</p>
			</div>


		</div>

		<div class="container">
			<h3>添加</h3>
			<form class="form-inline mb-5">
				<!-- <div class="row"> -->

				<div class="col-md-3">
					<div class="input-group flex-nowrap">

						<input id="ipt1" type="text" class="form-control" placeholder="姓名" aria-label="Username" aria-describedby="addon-wrapping">
					</div>
				</div>
				<div class="col-md-3">
					<div class="input-group ">
						<select id="nv" class="custom-select">

							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
				</div>
				<div class="col-md-3">
					<div class="input-group flex-nowrap">

						<input id="ipt2" type="text" class="form-control" placeholder="年龄" aria-label="Username" aria-describedby="addon-wrapping">
					</div>
				</div>
				<div class="col-md-3">
					<button id="btn" type="submit" class="btn btn-primary mb-2">添加</button>
				</div>


			</form>

		</div>


		<div class="container">
			<h3>列表</h3>
			<table class="table table-hover">
				<thead>
					<tr>
						<th scope="col">姓名</th>
						<th scope="col">性别</th>
						<th scope="col">年龄</th>
					</tr>
				</thead>
				<tbody id="list">

				</tbody>
			</table>
		</div>


		<script type="text/javascript">
			document.querySelector("#btn").addEventListener('click', function() {
				var ipt1 = document.querySelector("#ipt1").value;
				console.log(ipt1)
				var nv = document.querySelector("#nv").value;
				console.log(nv)
				var ipt2 = document.querySelector("#ipt2").value;
				console.log(ipt2)
				
				
				
				
				
				
				
				
				
				var xmlhttp;
				if (window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						console.log(xmlhttp.responseText) 
					}
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=%E5%B0%8F%E6%96%87&sex=%E7%94%B7&age=22", true);
				xmlhttp.send();



			})
		</script>
	</body>
</html>
